import React, { FC, PropsWithChildren, ReactElement } from 'react'
import { Layout, Menu } from 'antd'
import { observer } from 'mobx-react'
import setRouter from '@/routes'
import { useStore } from '@/store'
import getMenuTree from '@/hooks/menu'
import './index.scss'

const { Sider } = Layout

interface AppSiderProps {
  parentCode: string
}
const AppSider: FC <AppSiderProps> = (props: PropsWithChildren<AppSiderProps>) => {
  const { userStore, appStore } = useStore()
  const getChildrenMenu = (parentCode: string) => {
    const parentMenu = userStore.menu.find((item) => item.code === parentCode)
    return parentMenu?.children || []
  }
  const { parentCode } = props
  const childAsyncRoutes = setRouter(getChildrenMenu(parentCode))
  const menuTree: ReactElement[] = getMenuTree(childAsyncRoutes)
  console.log('appStore.sliderHide ', appStore.sliderHide)
  return (
    <Sider className={`app-slider ${appStore.sliderHide ? 'hide' : ''}`}>
      <Menu theme="dark" mode="inline" className="slider-menu" selectedKeys={appStore.defaultSiderSelect}>
        {menuTree}
      </Menu>
    </Sider>
  )
}

export default observer(AppSider)
